<template>
  <view>
    <uni-file-picker limit="10" file-mediatype="all" ref="uploadBox"
	  @progress="progress" 
	  @success="success" 
	  @fail="fail"
	  @select="select">
      <button class="upload_btn"><i class="iconfont">&#xe67c;</i>{{text}}</button>
      </uni-file-picker>
      <!-- 回显列表 -->
      <view v-if="fileLists !== ''">
	    <view class="show_file" v-for="item,index in fileLists" :key="index">
	    <view class="file-item">
	  <!-- 图标显示 -->
	    <i class="iconfont" style="color:#FA4E4E;font-size: 70rpx;" v-if="item.extname == 'pdf'">&#xe663;</i>
	    <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'png'">&#xe665;</i>
	    <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'jpg'">&#xe662;</i>
	    <i class="iconfont" style="color:#F6AD00;font-size: 70rpx;" v-if="item.extname == 'jpeg'">&#xe661;</i>
	    <i class="iconfont" style="color:#FF8976;font-size: 70rpx;" v-if="item.extname == 0">&#xe65d;</i>
	    <view style="padding:10rpx 20rpx 0 20rpx;">
	      <view class="title">{{item.name}}</view>
	      <view class="result">
	       <span>{{(item.size/1024).toFixed(2)}}kb</span>
	       <!-- <span style="margin-left: 20rpx;" >{{statusname}}</span> -->
	       <i class="iconfont" style="color:#00B42A;font-size:24rpx;margin-left:10rpx;" v-if="item.status === 'success'">&#xe69e;</i>
	       </view>
	      </view>
	    <view class="close" @click="removeMedical(item,index)"><i class="iconfont" style="font-size: 28rpx;">&#xe903;</i></view>
	  </view>
	  </view>
	      <ul v-if="isShowPreview">
	        <li>
	          <button>预览</button>
	        </li>
	      </ul>
	    </view>
      
  </view>
</template>

<script>
import {getToken} from "@/utils/auth";
import config from '@/config'
export default {
  props: {
    value: [String, Object, Array],
    // 图片数量限制
    limit: {
      type: Number,
      default: 10,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
    // 是否显示预览
    isShowPreview: {
      type: Boolean,
      default: false,
    },
    uploadFileUrl:{
      type: String,
    },
	text:{
	  type:String,
	}
  },
  data() {
    return {
      host: config.baseUrl,
      size: '',
      statusname: '',
      percentage: 0,
      fileLists: [],
	  fileId:'',
    };
  },
  methods: {
    // 获取上传状态
    select(e) {
      console.log('选择文件：', e,this.contractId)
	  this.fileLists.push(e.tempFiles[0])
	  // this.fileLists.push({name:e.tempFiles[0].name,extname:e.tempFiles[0].extname,size:e.tempFiles[0].size})
      const tempFilePaths = e.tempFilePaths;
      for (var i = 0; i < tempFilePaths.length; i++) {
		const tempFile = e.tempFiles[i];
		if( tempFile.size >= '10*1024*1024'){
	    this.$modal.msgError("您上传的文件过大，请检查或修改后，再上传！");
		}
		uni.showLoading({
		  title: "上传中",
		  mask:true,
		});
        uni.uploadFile({
          url: this.uploadFileUrl, // 上传合同模板文件
          header: {
            Authorization: "Bearer " + getToken(),
          },
          formData: {
            secretFlag: 'N',
            fileLocation: 5,
			contractId:this.contractId,
          },
          filePath: tempFilePaths[i],
          name: 'file',
          success: (uploadFileRes) => {
			this.fileId = JSON.parse(uploadFileRes.data).fileId
            // 获取上传合同模板的合同id
            uni.$emit("getContractIdEvent", {
              data: JSON.parse(uploadFileRes.data),number:this.fileLists.length
            })
            uni.hideLoading();
          },
          fail: () => {
            uni.hideLoading();
            uni.showToast("上传失败！")
          },
          complete: function () {
            uni.hideLoading();
          }
        });
      }
    },
    // 删除文件
    removeMedical(file,index) {
      this.fileLists.splice(index, 1)
	  this.$modal.msgSuccess("删除成功");
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },
    // 上传成功
    success(e) {
      console.log('上传成功')
    },
    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    }
  },
};
</script>
<style lang="scss" scoped>
// 不显示原生list样式
::v-deep .uni-file-picker__lists{display: none;}
.progressStyle{
  opacity:0;
  animation-name:fadenum;
  animation-duration:2s;
}

@keyframes fadenum{

0%{opacity:1;}

99%{opacity:1;}

100%{opacity:0;}

}
.upload_btn{
  color:$uni-color-primary;
  width: 330rpx;
  font-size: 26rpx;
  margin-left: 0;
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx solid $uni-color-primary;
  &:hover{
    color: #11A983;
    border-color: #b8e5da;
    background-color: #e7f6f3;
  }
  .iconfont{font-size: 28rpx;margin-right: 5rpx;}
}
@keyframes cloudLeft{
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.close{
  color: #86909c;
  position: absolute;
  right: 12rpx;
}
.show_file{
  position: relative;
  border-style: none;
  background: #F2F3F5;
  // border: 1rpx solid #cccccc;
  margin:20rpx 0 20rpx 0;
  // width:680rpx;
  align-items: center;
  border-radius: 8rpx;
  overflow: hidden;
  animation: wrapper-gradient 1s linear;
  animation-name: cloudLeft;
  padding:10rpx 40rpx 10rpx 20rpx;
  height: 100rpx;
  &:hover{
    color: #11A983;
    border-color: #b8e5da;
    background-color: #e7f6f3;
  }
.file-item{
  display: flex;
  align-items: center;
}
.title{
        width:100%;
        margin: 0;
        font-size: 28rpx;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1; //显示行数
        display: -webkit-box; /*作为弹性伸缩盒子模型显示*/
        -webkit-box-orient: vertical; /*伸缩盒子的排列方式：从上到下垂直*/
        color: #666666;
        line-height: 30rpx;

    }
.result{
    font-size:24rpx;
    margin: 0;
    // padding-top:7rpx;
    color:#86909c;
    line-height: 34rpx;
    }
  }
</style>
